<template>
	<view class="shop_detail">
		<view class="close">
			<image src="../../static/images/back_black_icon.png" mode="" @click="navTo('','navigateBack')"></image>
		</view>
		<view class="banner">
			<swiper class="swiper" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#fff"
				:indicator-dots="true" :autoplay="true" :interval="3000" :duration="600" circular>
				<swiper-item v-for="(item, index) in goodData.bannerPicList" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="name_card">
			<view class="goods_i">
				<view class="titles space">{{goodData.vipGoodsName}}</view>
				<view class="text space">{{goodData.vipLevelLabel}} {{goodData.givingAmount}}优惠金</view>
				<view class="price">
					<i-price :size="26">{{goodData.discountPrice}}</i-price>
					<text class="text">￥{{goodData.price}}</text>
				</view>
			</view>
		</view>

		<i-card top="20rpx" padding="40rpx 32rpx">
			<view class="shop_text">
				<view class=""></view>
				商品详情
				<view class=""></view>
			</view>
			<view class="conent_body">
				<image v-for="(item, index) in goodData.detailPicList" :key="index" :src="item" mode="widthFix"></image>
			</view>
		</i-card>
		<view style="height: 220rpx">
		</view>
		<view class="bottom">
			<view class="bottoms">
				<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 0" radius="4" size="32"
					@click="confirm">立即开通</i-buttons>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue";
	import {
		navTo
	} from '../../utils/common'
	import useStore from '../../stores/index'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'

	const store = useStore()


	const goodData = computed(() => {
		return store.goodsOrder as any
	})

	const confirm = () => {
		navTo(`/pages/views/confirm_order`, 'redirectTo')
	}
	onMounted(() => {
		//#ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		//#endif
	})
	
	onShareAppMessage(() => {
		return {
			title: '会员中心',
			path: '/pages/views/vip_center',
		}
	})
	onShareTimeline(() => {
		return {
			title: '会员中心',
			path: '/pages/views/vip_center',
		}
	})
</script>

<style lang="scss" scoped>
	.shop_detail {
		width: 100%;
		background-color: $backColor;

		.banner {
			width: 750rpx;
			height: 750rpx;

			.swiper {
				width: 750rpx;
				height: 750rpx;
			}
		}

		.close {
			position: fixed;
			/* #ifdef APP-PLUS */
			top: var(--status-bar-height);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			top: calc(var(--status-bar-height) + 22px);
			/* #endif */
			left: 32rpx;
			z-index: 96;
			height: 44px;
			width: 100%;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			// @include 
		}

		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.detail_shop {
			@include flexRS;
			align-items: flex-end;

			.shop_left {
				@include flexC;

				.goodsPrice {
					@include flexR;
					align-items: flex-end;

					text {
						text-decoration: line-through;
						@include dprice(26rpx);
						color: $content-color;
						margin-bottom: 2rpx;
						margin-left: 8rpx;
					}
				}
			}

			.shop_right {
				@include flexC;
				align-items: flex-end;
				@include contentfont(26rpx);

				.price {
					@include dprice(36rpx);
				}
			}
		}

		.shop_title {
			margin-bottom: 16rpx;
			@include contentfont(32rpx);
			@include dWeight;
		}

		.conent_body {
			@include flexCC;

			image {
				width: 100%;
			}
		}

		.name_card {
			width: calc(100% - 88rpx);
			margin: 49rpx auto;

			.goods_i {
				@include flexC;
				width: 100%;

				.text {
					@include contentfont;
				}

				.titles {
					@include titlefont;
				}

				.space {
					margin-bottom: 16rpx;
				}

				.price {
					@include flexR;

					text {
						text-decoration: line-through;
						margin-left: 8rpx;
					}
				}
			}
		}


		.shop_text {
			@include flexRC;
			@include contentfont(28rpx);
			white-space: nowrap;
			margin-bottom: 24rpx;

			view {
				width: 40%;
				height: 1rpx;
				background: $line-color;
				margin: 0 24rpx;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 0 40rpx 0;

			.bottoms {
				padding: 0 32rpx;
			}
		}
	}

	.shop_specs {
		width: 100%;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-color: #fff;
		padding: 48rpx 32rpx;
		position: relative;

		image {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			right: 40rpx;
			top: 40rpx;
		}

		.shop_price {
			@include flexCC;
			margin-bottom: 36rpx;

			.not_price {
				@include dprice(26rpx);
				color: $content-color;
				margin-top: 8rpx;
				margin-left: 8rpx;
				text-decoration: line-through;
			}
		}

		.signal {
			margin-bottom: 32rpx;

			.signal_title {
				@include titlefont(26rpx);
				margin-bottom: 32rpx;
				@include dWeight;
			}
		}

	}

	.goodVip {
		width: 140rpx;
		height: 36rpx;
		margin-bottom: 16rpx;
	}

	.lines {
		margin: 32rpx 0;
		height: 1rpx;
		background: $background-color;
	}

	.message {
		@include contentfont(26rpx);
		margin-bottom: 20rpx;
	}
</style>